<script setup>
import {getFileUrl} from "@/utils/ruoyi.js";
const props = defineProps({
  listData: {
    type:Array,
    default: () => []
  },
  surveyData: {
    type:Object,
    default: () => ({})
  }
})
const { proxy } = getCurrentInstance();

const contentStyle = computed(()=>{
  let bgUrl = proxy.getFileUrl(props.surveyData.bgImg)
  return {
    backgroundColor: props.surveyData.bgColor,
    backgroundImage: bgUrl ? `url(${bgUrl})` : '',
    backgroundSize: 'cover'
  }
})

</script>

<template>
  <div :style="contentStyle" >
    <el-scrollbar class="content-scrollbar">
      <img class="w-[100%] max-h-[100px]" v-if="surveyData.topImg" :src="getFileUrl(surveyData.topImg)" alt="">
      <div class="px-[20px] relative">
        <div v-if="surveyData.showTitle ==='Y'" :style="{color: surveyData.nameColor}" class="text-center text-[20px] leading-[60px] mt20 ">{{surveyData.surName}}</div>
        <div v-if="surveyData.showDesc ==='Y'"  :style="{color: surveyData.descColor}" class="text-[16px] mb-[20px]">{{surveyData.surDesc}}</div>
        <div class="mt-[20px]">
          <slot></slot>
          <div v-show="!listData.length" class="empty-info">
            <span class="text-[16px] text-[#777]">从左侧拖入进行问卷设计</span>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.empty-info{
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
